<template>
  <div class="permission-setting__list">
    <section>
      <div class="permission-setting__list--input">
        <div>员工搜索</div>
        <n-input type="text" placeholder="请输入会员姓名/电话/编号" />
        <button>重置</button>
        <div>
          <button>添加员工</button>
        </div>
      </div>
      <n-data-table :columns="columns" :data="data" :max-height="590" striped />
    </section>
    <div>
      <n-pagination :page-count="100" :page-slot="7">
        <template #prev>
          上一页
        </template>
        <template #next>
          下一页
        </template>
      </n-pagination>
    </div>
  </div>
  <n-drawer class="permission-setting__list--drawer" v-model:show="active" width="75%">
    <n-drawer-content body-style="--n-body-padding:0;" closable>
      <template #header>
        <div class="my-title--primary">添加员工</div>
      </template>
      <div class="permission-setting__list--drawer__content">
        <div>
          <div class="required">员工姓名</div><input type="text" placeholder="请输入姓名" />
        </div>
        <div>
          <div class="required">员工电话</div><input type="number" placeholder="请输入11位号码" />
        </div>
        <div>
          <div>身份证号</div><input type="number" placeholder="请输入身份证号" />
        </div>
        <div>
          <div class="required">入职时间</div>
          <n-date-picker v-model:value="timestamp" type="date" :placeholder="'请选择'" :to="false" />
        </div>
        <div>
          <div class="required">职位</div>
          <n-select v-model:value="value" :options="options" />
        </div>
        <div>
          <div>工资</div><input type="number" placeholder="0" />
        </div>
        <div>
          <div class="required">登录账号</div><input type="text" placeholder="请输入登录密码" />
        </div>
        <div>
          <div class="required">密码</div><input type="text" placeholder="请输入登录密码" />
        </div>
      </div>
      <template #footer>
        <button class="my-btn--primary" @click="active = false">确认保存</button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup>
import { h, ref } from "vue";
import moreButton from "./@fragment/more-button.vue";
import { useMessage, useDialog } from "naive-ui";
const active = ref(false);
const message = useMessage();
const dialog = useDialog();
const columns = [
  {
    title: '员工姓名',
    key: 'name'
  },
  {
    title: '职位',
    key: 'type'
  },
  {
    title: '员工账号',
    key: 'id'
  },
  {
    title: '入职时间',
    key: 'time',
  },
  {
    title: '操作',
    key: 'actions',
    className: 'actions',
    width: 320,
    render() {
      return h(moreButton, {
        edit: '编辑',
        del: '删除',
        onHandleEdit() {
          dialog.info({
            title: "提示",
            content: "确认将商品一键入库？确认后，该商品会自动入库到当前店铺， 如多家店铺请先切换店铺入库。",
            positiveText: "确定",
            onPositiveClick: () => {
              message.success("确定");
            }
          });
        },
        onHandleDel() {
          // goodsInfoDrawerActive.value = true
        }
      })
    }
  }
], data = Array.from({ length: 46 }).map((_, index) => ({
  key: index,
  name: `张三`,
  type: '店员',
  id: '13678945625',
  time: '2022-02-25',
  actions: '成功'
}));
</script>
<style lang="less" scoped>
.permission-setting__list {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 128px;
  height: 100%;

  >section {
    margin: 0 30px;

    .permission-setting__list--input {
      display: grid;
      grid-template-columns: 102px 380px 114px auto;
      grid-template-rows: 60px;
      grid-column-gap: 18px;
      margin-bottom: 28px;

      >div:first-child {
        align-self: center;
        font-size: 24px;
        color: #4A5060;
      }

      /deep/ .n-input {
        &__placeholder {
          color: #666;
        }
      }

      >button {
        height: 100%;
        font-size: 24px;
        background: #F8F8F8;
        color: #4A5060;
        line-height: 60px;
        text-align: center;
        border: 1px solid #E5E5E5;
        border-radius: 5px;
      }

      >div:last-child {
        display: flex;
        justify-content: end;
        width: 100%;
        height: 100%;

        >button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 180px;
          height: 100%;
          font-size: 26px;
          font-weight: 400;
          background: #1981F4;
          color: #FFFFFF;
          border-radius: 5px;
        }
      }
    }

    /deep/ .n-data-table {
      .actions {
        padding-left: 30px;
        border-left: 1px solid #D8D8D8;
      }
    }
  }

  >div:last-child {
    display: flex;
    align-items: center;
    padding-left: 30px;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
  }
}


.permission-setting__list--drawer__content {
  display: grid;
  grid-template-columns: 605px 605px;
  grid-auto-rows: 120px;
  grid-column-gap: 200px;
  margin: 0 30px;

  >div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    &:nth-child(2n) {
      >input {
        margin-right: 30px;
      }

      /deep/ .n-date-picker {
        .n-input {

          .n-input__border,
          .n-input__state-border {
            border: none;
          }

          .n-input-wrapper {
            padding: 0 30px;
          }

          &:not(.n-input--disabled) {
            &.n-input--focus {
              .n-input__state-border {
                box-shadow: none;
              }
            }
          }

          .n-input__input-el,
          .n-input__placeholder {
            text-align: right;
          }

          .n-input__placeholder {
            color: #999;
          }
        }

        .n-input__suffix {
          display: none;
        }

        .n-button {
          font-size: 22px;
          padding: 21px;
        }
      }
    }

    >div:first-child {
      font-size: 26px;
      color: #4A5060;
    }

    >input {
      text-align: right;
      font-size: 26px;

      &::placeholder {
        color: #999;
      }
    }

    /deep/ .n-select {
      width: 70%;
      .n-base-selection {

        .n-base-selection__border,
        .n-base-selection__state-border {
          border: none;
        }

        &:not(.n-base-selection--disabled) {

          &.n-base-selection--active,
          &.n-base-selection--focus {
            .n-base-selection__state-border {
              box-shadow: none;
              border: none;
            }
          }
        }

        .n-base-selection-placeholder {
          margin-right: 17px;
          justify-content: end;
          color: #999;
        }

        .n-base-suffix {
          transform: translateY(-50%) scale(2);
          .n-base-suffix__arrow{
            color: #999;
          }
        }
      }
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 545px;
      height: 1px;
      background-color: #E5E5E5;
    }
  }

  .required {
    &::after {
      content: '*';
      margin-left: 6px;
      color: #EC3F14;
    }
  }
}
</style>